<!--侧边栏组件-->
<template>
  <div class="aside">
    <el-menu ref="menu" default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      unique-opened background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
      <router-link to="/HomePage" class="router-link">
        <el-menu-item id="HomePage" index="1">
          <i class="el-icon-s-home"></i>
          <span slot="title">工作台</span>
        </el-menu-item>
      </router-link>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-shopping-bag-1" />
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/ProductList" class="router-link">
            <el-menu-item id="ProductList" index="2-1" class="el-menu-item-bg">
              <i class="el-icon-milk-tea" />
              <span>商品列表</span>
            </el-menu-item>
          </router-link>
          <router-link to="/ProductAdd" class="router-link">
            <el-menu-item id="ProductAdd" index="2-2" class="el-menu-item-bg">
              <i class="el-icon-circle-plus-outline" />
              <span>添加商品</span>
            </el-menu-item>
          </router-link>
          <router-link to="/ProductType" class="router-link">
            <el-menu-item id="ProductType" index="2-3" class="el-menu-item-bg">
              <i class="el-icon-menu" />
              <span>商品分类</span>
            </el-menu-item>
          </router-link>
          <router-link to="/ProductBrand" class="router-link">
            <el-menu-item id="ProductBrand" index="2-4" class="el-menu-item-bg">
              <i class="el-icon-discount" />
              <span>商品品牌</span>
            </el-menu-item>
          </router-link>
          <router-link to="/ProductSpecs" class="router-link">
            <el-menu-item id="ProductSpecs" index="2-5" class="el-menu-item-bg">
              <i class="el-icon-cloudy" />
              <span>商品规格</span>
            </el-menu-item>
          </router-link>
          <router-link to="/Purchase" class="router-link">
            <el-menu-item id="Purchase" index="2-6" class="el-menu-item-bg">
              <i class="el-icon-truck" />
              <span>商品采购</span>
            </el-menu-item>
          </router-link>
          <router-link to="/Supplier" class="router-link">
            <el-menu-item id="Supplier" index="2-7" class="el-menu-item-bg">
              <i class="el-icon-s-custom" />
              <span>供应商管理</span>
            </el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-order" />
          <span>订单管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/OrderList" class="router-link">
            <el-menu-item id="OrderList" index="3-1" class="el-menu-item-bg">
              <i class="el-icon-news" />
              <span>订单列表</span>
            </el-menu-item>
          </router-link>
          <router-link to="/ReturnGoods" class="router-link">
            <el-menu-item id="ReturnGoods" index="3-2" class="el-menu-item-bg">
              <i class="el-icon-box" />
              <span>退货申请处理</span>
            </el-menu-item>
          </router-link>
          <router-link to="/ReturnReason" class="router-link">
            <el-menu-item id="ReturnReason" index="3-3" class="el-menu-item-bg">
              <i class="el-icon-edit-outline" />
              <span>退货原因设置</span>
            </el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>


      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-sell" />
          <span>营销管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/SlideShow" class="router-link">
            <el-menu-item id="SlideShow" index="4-1" class="el-menu-item-bg">
              <i class="el-icon-picture" />
              <span>商品轮播图</span>
            </el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>


      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-bell" />
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/AdminList" class="router-link">
            <el-menu-item id="AdminList" index="5-1" class="el-menu-item-bg">
              <i class="el-icon-eleme" />
              <span>管理员列表</span>
            </el-menu-item>
          </router-link>
          <router-link to="/UserList" class="router-link">
            <el-menu-item id="UserList" index="5-1" class="el-menu-item-bg">
              <i class="el-icon-user" />
              <span>顾客列表</span>
            </el-menu-item>
          </router-link>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import store from "../../store";

export default {
  name: "Aside",
  watch: {
    // 监听路由
    $route(val) {
      let other = document.getElementsByClassName("el-menu-item");
      for (let i = 0; i < other.length; i++) {
        other[i].style.color = 'rgb(191, 203, 217)';
      }
      switch (val.path) {
        case "/HomePage":
          document.getElementById("HomePage").style.color = 'rgb(64, 158, 255)';
          break;
        case "/ProductList":
          document.getElementById("ProductList").style.color = 'rgb(64, 158, 255)';
          break;
        case "/ProductAdd":
          document.getElementById("ProductAdd").style.color = 'rgb(64, 158, 255)';
          break;
        case "/ProductType":
          document.getElementById("ProductType").style.color = 'rgb(64, 158, 255)';
          break;
        case "/ProductBrand":
          document.getElementById("ProductBrand").style.color = 'rgb(64, 158, 255)';
          break;
        case "/ProductSpecs":
          document.getElementById("ProductSpecs").style.color = 'rgb(64, 158, 255)';
          break;
        case "/OrderList":
          document.getElementById("OrderList").style.color = 'rgb(64, 158, 255)';
          break;
        case "/AdminList":
          document.getElementById("AdminList").style.color = 'rgb(64, 158, 255)';
          break;
        case "/UserList":
          document.getElementById("UserList").style.color = 'rgb(64, 158, 255)';
          break;
        case "/RoleList":
          document.getElementById("RoleList").style.color = 'rgb(64, 158, 255)';
          break;
        case "/Purchase":
          document.getElementById("Purchase").style.color = 'rgb(64, 158, 255)';
          break;
        case "/Supplier":
          document.getElementById("Supplier").style.color = 'rgb(64, 158, 255)';
          break;
        case "/ReturnReason":
          document.getElementById("ReturnReason").style.color = 'rgb(64, 158, 255)';
          break;
        case "/ReturnGoods":
          document.getElementById("ReturnGoods").style.color = 'rgb(64, 158, 255)';
          break;
        case "/SlideShow":
          document.getElementById("SlideShow").style.color = 'rgb(64, 158, 255)';
          break;

      }
      if (this.$route.path === '/HomePage') {
        this.$refs.menu.close(window.localStorage.getItem('menu-index'));
      }
    }
  },
  methods: {
    handleOpen(key) {
      window.localStorage.setItem('menu-index', key);
      if (store.state.token === null) {
        this.$notify({
          title: '警告',
          message: '请先登录哦！',
          type: 'warning'
        });
        this.$router.push('/loginForm');
      }
      let role = this.$store.state.role;
      switch (key) {
        case "2":
          if (role.indexOf(this.$VAR.productRole) === -1 && role.indexOf(this.$VAR.adminRole) === -1) {
            if (this.$route.path !== '/NoAccess') {
              this.$router.push({ path: '/NoAccess' });
            }
            this.$refs.menu.close(key);
          }
          break
        case "3":
          if (role.indexOf(this.$VAR.orderRole) === -1 && role.indexOf(this.$VAR.adminRole) === -1) {
            if (this.$route.path !== '/NoAccess') {
              this.$router.push({ path: '/NoAccess' });
            }
            this.$refs.menu.close(key);
          }
          break
        case "4":
          if (role.indexOf(this.$VAR.productRole) === -1 && role.indexOf(this.$VAR.adminRole) === -1) {
            if (this.$route.path !== '/NoAccess') {
              this.$router.push({ path: '/NoAccess' });
            }
            this.$refs.menu.close(key);
          }
          break
        case "5":
          if (role.indexOf(this.$VAR.userRole) === -1 && role.indexOf(this.$VAR.adminRole) === -1) {
            if (this.$route.path !== '/NoAccess') {
              this.$router.push({ path: '/NoAccess' });
            }
            this.$refs.menu.close(key);
          }
          break
      }
    },
  }
}
</script>

<style>
.aside {
  height: 100%;
}

.aside .el-menu-vertical-demo {
  height: 100% !important;
  user-select: none;
  overflow-x: hidden;
}

.aside .el-menu-vertical-demo::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0;
  /*高宽分别对应横竖滚动条的尺寸*/
}

.aside .el-menu-item-bg {
  background: #1F2D3D !important;
  min-width: auto !important;
  padding-left: 55px;
}

.aside .el-menu-item-bg:hover {
  background: #001528 !important;
}

.aside .el-menu-item-group__title {
  display: none;
}

.aside .el-submenu__title,
.el-menu-item {
  text-align: left;
  padding-left: 30px !important;
}

.aside .el-menu-item i {
  color: inherit !important;
}

.aside .router-link {
  text-decoration: none;
  color: #bfcbd9;
}

.aside .router-link:hover {
  text-decoration: none;
  color: #409EFF;
}

.el-menu span {
  display: inline-block;
  margin-left: 5px;
}
</style>
